<template>
  <el-dialog
    top="80px"
    :visible.sync="isVisible"
    :title="title"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-container>
      <el-main :style="{ 'max-height': maxHeightDialog }">
        <t-detail
          v-if="detailList.length != 0"
          :list="detailList"
          :is-title="true"
          :title="'基本信息'"
          :is-card-border="true"
        >
        </t-detail>
      </el-main>
      <el-footer>
        <el-button
          size="medium"
          icon="el-icon-close"
          style="width: 120px"
          @click="isVisible = false"
        >
          关闭
        </el-button>
      </el-footer>
    </el-container>
  </el-dialog>
</template>

<script>
import TDetail from '@/components/TDetail'
import dataDetailMixins from '@/mixins/data-detail-mixins'

export default {
  name: 'PlaceRecordsDetail',
  components: {
    TDetail,
  },
  mixins: [dataDetailMixins],
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    params: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      detailList: [],
    }
  },
  computed: {
    isVisible: {
      get() {
        return this.dialogVisible
      },
      set() {
        this.toClose()
      },
    },
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      this.detailObj = { ...this.params.item }
      this.detailList = this.getDetailList()
    },
    getDetailList() {
      const list = [
        [
          { text: 'id', value: this.detailObj.id },
          { text: '租户ID', value: this.detailObj.tenantId },
        ],
        [
          { text: '所属省', value: this.detailObj.province },
          { text: '所属市', value: this.detailObj.city },
        ],
        [
          { text: '所属区县', value: this.detailObj.area },
          { text: '', value: '' },
        ],
        [
          { text: '场所名称', value: this.detailObj.placeName },
          { text: '地址', value: this.detailObj.address },
        ],
        [
          { text: '位置', value: this.detailObj.location },
          { text: '', value: '' },
        ],
        [
          { text: '负责人', value: this.detailObj.manager },
          { text: '联系电话', value: this.detailObj.contactNum },
        ],
        [
          { text: '创建时间', value: this.detailObj.createTime },
          { text: '', value: ''},
        ],
        
      ]
      return list
    },
    toClose() {
      this.$emit('close')
    },
  },
}
</script>

<style scoped lang="scss">
@import '../../../../../styles/part-custom';
.detail-div {
  border: 1px solid #d5dbe0;
  border-right: 0px solid #d5dbe0;
  border-bottom: 0px solid #d5dbe0;
}
.detail-row {
  border-bottom: 1px solid #d5dbe0;
  display: flex;
}
.detail-label {
  width: 20%;
  border-right: 1px solid #d5dbe0;
  padding: 4px;
  text-align: right;
  color: #525e8c;
  background: #f9fcfd;
}
.detail-value {
  width: 30%;
  border-right: 1px solid #d5dbe0;
  padding: 4px;
}
</style>
